<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 过滤器也可以串联，而且可以接受参数 -->
        <!-- {{ message | filterA | filterB }} -->
        <!-- {{ message | filterA('argsA', 'argsB') }} -->
        {{ date | formatDate }}
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //在月份、日期、小时等小于10时前面补0
        var padDate = function(value){
            return value < 10 ? '0' + value : value;
        };

        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                name: 'liming',
                date: new Date()
            },
            filters: {
                formatDate: function (value){//该value就是需要过滤的数据
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    //将整理好的数据返回出去
                    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
              }  
            },
            mounted() {
                var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function(){
                    _this.date = new Date();//修改数据date
                },1000);
            },
            beforeDestroy() {
                if (this.timer){
                    clearInterval(this.timer) //在Vue实例销毁前，清除我们的定时器
                }
            },
        })
    </script>
</body>
</html>